<template>
	<view>
		<navbar :isback="true" title="发布详情"></navbar>
		<u-loading-page icon-size="100rpx" :loading="loading" loading-text="驼乡生活信息超市"></u-loading-page>
		<view class="" v-if="!loading">
			<view class="con">
				<view class="con__top">
					<view class="u-flex u-flex-y-center">
						<u-avatar :src="URL(item.avatar)" mode="aspectFill" shape="circle" size="57rpx"></u-avatar>
						<view class="con__nickname">
							{{item.contract}}
						</view>
						<view class="con__zd" v-if="item.type==2">
							置顶
						</view>
					</view>
					<view class="u-flex u-flex-y-center">
						<view class="con__tag" v-if="item.category_name">
							{{item.category_name}}
						</view>
						<view class="con__tag" v-if="item.is_other==2">
							其他信息
						</view>
						<!-- <u-icon @click.stop="callphone" name="/static/msg/mobile.png" size="62rpx"></u-icon> -->
					</view>
				</view>
				<view class="con__content">
					{{item.text}}
				</view>
			
				<u-swiper :list="item.imags" v-if="item.imags&&item.imags.length>0" radius='20rpx' :autoplay="false"
					@click="clickswp" height="511rpx"></u-swiper>
				<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 40rpx;">
					<view class="con__time">
						{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM')}}
					</view>
					<view class="u-flex u-flex-y-center">
						<view class="u-flex u-flex-y-center">
							<u-icon name="/static/msg/ll.png" color="#1A1A1A" size="44rpx" imgMode='widthFix'></u-icon>
							<view class="con__num">
								{{item.view}}
							</view>
						</view>
						<!-- <image src="" mode="widthFix"></image> -->
						<view class="u-flex u-flex-y-center">
							<u-icon name="/static/msg/fx.png" color="#1A1A1A" size="33rpx"></u-icon>
							<view class="con__num">
								{{item.share}}
							</view>
						</view>
						<view class="u-flex u-flex-y-center" @click="dianz">
							<u-icon name="/static/msg/sc.png" v-if="!item.isCollect" color="#1A1A1A" size="34rpx" imgMode='widthFix'></u-icon>
							<u-icon name="/static/msg/ysc.png" v-else color="#E8BF05" size="34rpx" imgMode='widthFix'></u-icon>
							<!-- <u-icon name="star-fill" :color="item.isdianz?'#E8BF05':'#1A1A1A'" size="34rpx"></u-icon> -->
							<view class=" con__num">
								{{item.collect}}
							</view>
						</view>
					</view>
				</view>
			
			</view>
			<!-- <u-gap bgColor="#fff" height="20rpx"></u-gap> -->
			<u-gap bgColor="#FAFAFA" height="20rpx"></u-gap>
			<view class="info">
				<view class="infoitem">
					<view class="u-flex u-flex-y-center">
						<image src="/static/msg/nickname.png" class="infoitem__nickname" mode=""></image>
						昵称
					</view>
					<view class="infoitem__val">
						{{item.username}}
					</view>
				</view>
				<view class="infoitem">
					<view class="u-flex u-flex-y-center">
						<image src="/static/msg/addr.png" class="infoitem__addr" mode=""></image>
			
						地址
					</view>
					<view class="infoitem__val">
						{{item.address}}
					</view>
				</view>
			</view>
			<view class="user" @click="to('/pages/my/pagehome?title='+item.username+'&userId='+item.user_id)">
				<view class="u-flex u-flex-y-center">
					<u-avatar :src="URL(item.avatar)" mode="aspectFill" shape="circle" size="110rpx"></u-avatar>
			
					<view class="user__center">
						<view class="user__nickname">
							{{item.contract}}
						</view>
						<view class="user__num">
							已发布{{num}}条
						</view>
					</view>
				</view>
				<u-icon name="arrow-right" size="30rpx" color="#9A9A9A"></u-icon>
			</view>
			<view class="footerpl">
			
			</view>
			<view class="footer">
				<view class="footer__left">
					<button open-type="share" style="width: 45rpx;height: 45rpx;background-color: transparent;padding: 0;border: 0;">
						<u-icon name="/static/msg/fx2.png" size="45rpx"></u-icon>
					</button>
					<!-- <u-icon name="/static/msg/fx2.png" color="#3692FF" size="45rpx" imgMode='widthFix'></u-icon> -->
					<view class="footer__left__text">
						分享
					</view>
				</view>
				<u-button text="打电话" @click="callphone(item.phone)" icon='/static/msg/mobile3.png'  size="large" shape='circle'
					color="linear-gradient(91deg, #6E77FA, #5E77FD)"
					:customStyle="{ margin:0,height:'114rpx',boxShadow:'0rpx 5rpx 10rpx 0rpx rgba(57,150,252,0.38)',width:'604rpx'}"></u-button>
			</view>
		</view>
		<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/api/config.js'
	import home from '@/api/_home.js'
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				item: {},
				id: '',
				num: 0,
				loading:true
			};
		},
		methods: {
			clickswp(e) {
				// console.log(e)
				this.preview(this.item.imags, e)
			},
			dianz() {
				this.item.isCollect = !this.item.isCollect
				home.infoCollect({
					id: this.item.id
				}).then(res => {
					uni.$u.toast('操作成功')
				})
				if (this.item.isCollect) {
					this.item.collect++
				}
				if (!this.item.isCollect) {
					this.item.collect--
				}
				// this.$emit('dianz', this.isCollect)
				this.$forceUpdate()
			},
			getinfo() {

				home.infoDetail({
					id: this.id
				}).then(res => {
					if (res.data.code == 1) {
						this.item = res.data.data
						this.item.imags = []
						let imgarr = this.item.ad_images.split(',')
						if (!this.item.ad_images) {
							imgarr = []
						}
						imgarr.map(t1 => {
							this.item.imags.push(BASE_URL + t1)
						})
						user.findInfo({
							userId: this.item.user_id,
							status:2
						}).then(res1 => {
							if (res1.data.code == 1) {
								this.loading=false
								this.num = res1.data.data.length
							}
						})
					}
				})

			}
		},
		onLoad(o) {
			this.id = o.id
			this.getinfo()
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 44rpx 30rpx 20rpx;

		&__top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10rpx;
		}

		&__nickname {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #5A5A5A;
			line-height: 26rpx;
			margin: 0 8rpx;
		}

		&__zd {
			padding: 0 9rpx;
			height: 36rpx;
			background: #E1BC13;
			border-radius: 18rpx 18rpx 18rpx 0rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #7A3807;
			line-height: 36rpx;
		}

		&__tag {
			padding: 0 10rpx;
			height: 47rpx;
			background: #F7F7F9;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 25rpx;
			color: #4E4D52;
			line-height: 47rpx;
			margin-right: 15rpx;
		}

		&__content {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #2C2A2A;
			line-height: 40rpx;
			padding: 14rpx 0 20rpx;
		}

		&__piclist {}

		&__time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #5A5A5A;
			line-height: 24rpx;
		}

		&__num {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #3C3C3C;
			line-height: 24rpx;
			margin: 0 50rpx 0 12rpx;
		}
	}

	.info {
		padding: 0 0 0 30rpx;
		border-bottom: 2rpx solid #F4F6F8;
	}

	.infoitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #F4F6F8;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 28rpx;
		height: 116rpx;

		&__nickname {
			width: 33rpx;
			height: 46rpx;
			margin-right: 29rpx;
		}

		&__addr {
			width: 37rpx;
			height: 42rpx;
			margin-right: 27rpx;
		}

		&__val {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #010101;
			line-height: 28rpx;
			padding-right: 32rpx;
		}
	}

	.infoitem:last-child {
		border-bottom: 0;
	}

	.user {
		padding: 38rpx 21rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__center {
			height: 110rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 16rpx;
		}

		&__nickname {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #1E1E1E;
			line-height: 32rpx;
		}

		&__num {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #6C6C6B;
			line-height: 26rpx;
			margin-top: 20rpx;
		}
	}

	.footer {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(40, 40, 40, 0.05);
		padding: 25rpx 30rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;

		&__left {
			display: flex;
			flex-direction: column;
			align-items: center;

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #1E1E1E;
				line-height: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.footerpl {
		height: 160rpx;
	}
</style>